<template>
  <v-app app>
    <v-app-bar scroll-behavior="inverted">
      <template  #prepend >
        <v-row class="mx-auto fill-height d-flex justify-space-around">
          <v-img
            class="fill-height mx-auto"
            :src="bannerImagePath"
            min-width="300"
            alt="CP Banner"

          ></v-img>
          <v-divider vertical :thickness="3"></v-divider>
        </v-row>
      </template>

      <template #title>
        {{route.meta.title}}
      </template>

      <template #append>
        <v-menu :close-on-content-click="false">
          <template #activator="{ props }">
            <v-btn
              icon="mdi-cog"
              v-bind="props"
            ></v-btn>
          </template>
          <v-card vlass variant="tonal">
            <v-card-title>
              主题<br />
              <v-divider></v-divider>
            </v-card-title>

            <v-card-text class="aligen-center">
              <v-radio-group v-model="curTheme" row>
                <v-radio
                  v-for="item in themeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></v-radio>
              </v-radio-group>
            </v-card-text>



          </v-card>


        </v-menu>

      </template>
    </v-app-bar>

    <v-main>
      <RouterView />
    </v-main>

    <v-footer class="text-end d-flex justify-md-end text-body-1" border="second-primary t-sm"   app>
      <v-list lines="one" class="w-100">
        <v-list-item
          v-for="item in footerText"
          :key="item"
          :subtitle="item"
        >
        </v-list-item>
      </v-list>
    </v-footer>


  </v-app>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { useTheme } from 'vuetify';

import banner_dark from '@/assets/dark-theme/image/banners/CP_banner-Dark.png';
import banner_light from '@/assets/light-theme/image/banners/CP_banner-Light.png';
import { useRoute } from 'vue-router';
const route = useRoute();

const theme = useTheme();
const bannerImagePath = computed(() => {
  return theme.global.current.value.dark ? banner_dark : banner_light ;
});
const themeOptions = [{ label: '浅色', value: 'light' }, { label: '深色', value: 'dark' }];
const curTheme = ref('dark');

const footerText=[
  '管理员邮箱: 22301014@bjtu.edu.cn', '© 2024 北京交通大学智慧课程平台(CP)'
];

watch(curTheme, (newTheme) => {
  theme.global.name.value = newTheme;
}, { immediate: true });

</script>

